<template>
    <ZkModalVue  :title="title" :size="'xl'" :visible="visible" @cancel="handleCancel">
        <ZkList ref="table" rowKey="id" :type="2" :searchs="searchs" :columns="columns" :data="loadData">
            <template #operBtns>
                <div>
                    <a-button type="primary" icon="plus" @click="handleEdit()">新增</a-button>
                </div>
            </template>
            <template #action="record">
                <span>
                    <zk-btn @click="handleDel(record)" icon="delete">取消分配</zk-btn>
                </span>
            </template>
        </ZkList>
        <SelectUser ref="selectUser"></SelectUser>
    </ZkModalVue>
</template>
<script>
    import { ZkList, InputTypeEnum } from '@/appBase';
    import { authUserCancel, authUserSelectAll, changeRoleStatus, delRole, queryAllocatedUserList, queryRoleList } from '@/api/role';
    import ZkModalVue from '@/appBase/ZkModal.vue';
    import { createNotPageDataPromise } from '@/appBase/utils';
    import SelectUser from './SelectUser.vue';
    export default {
        name: 'AuthUser',
        components: {
            ZkList,
            ZkModalVue,
            SelectUser
        },
        data() {
            return {
                title: "已分配用户",
                visible:false,
                id:'',
                // 查询
                searchs: [
                    { title: "用户名称", dataIndex: 'userName' },
                    { title: "手机号码", dataIndex: 'phonenumber', type: InputTypeEnum.NUMBER }
                ],
                // 表头
                columns: [
                    { title: "用户名称", dataIndex: "userName", width: '140px', maxLength: 10 },
                    { title: "用户昵称", dataIndex: "nickName", width: '150px', maxLength: 10 },
                    { title: "手机", dataIndex: "phonenumber", width: '100px' },
                    { title: "创建时间", dataIndex: "createTime", width: '150px',format:true },
                    { title: "操作", scopedSlots: { customRender: "action" }, width: '180px', fixed: 'right' },
                ],
                // 加载数据方法 必须为 Promise 对象
                loadData: (queryParams, parameter) => {
                    if (!this.id) {
                        return createNotPageDataPromise();
                    }
                    const params = {
                        ...queryParams,
                        roleId:this.id
                    };
                    return queryAllocatedUserList(params, parameter);
                }
            }
        },
        methods: {
            show(param) {
                this.id = param.id;
                this._onOk = param.onOk;
                this._onCancel = param.onCancel;
                this.visible = true;
                this.$nextTick(() => {
                    this.$refs.table.reset();
                    this.$refs.table.refresh();
                })
            },

            handleEdit() {
                this.$refs.selectUser.show({
                    roleId: this.id,
                    onOk: async (keys) => {
                        console.log('keys',keys);
                        await authUserSelectAll({
                            roleId: this.id,
                            userIds: keys
                        });
                        this.$refs.table.refresh(true);
                    }
                });
            },

            handleDel(item) {
                this.$confirm({
                    title: '提示',
                    content: `确认要取消该用户的角色吗？`,
                    onOk: async () => {
                        await authUserCancel({
                            roleId: this.id,
                            userId: item.userId
                        });
                        this.$refs.table.refresh(true);
                    }
                });
            },
            
            handleCancel() {
                this.visible = false;
                if (this._onCancel) this._onCancel();
            }
        }
    }
</script>